﻿<template>
  <div class = 'show_content'>
    <el-form ref="generateForm" :model = "models" :rules = "rules" :label-position = "data.pageConfig.labelPosition"
    :label-width = "data.pageConfig.labelWidth + 'px'">
      <template v-for = "item in data.list">
        <!-- 栅格布局时 -->
        <template v-if = "item.type == 'grid' && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
          <el-row :key = "item.key" type = "flex"
            :gutter = "item.options.gutter ? item.options.gutter : 0"
            :justify = "item.options.justify"
            :align = "item.options.align">
            <el-col v-for = "(col, colIndex) in item.columns" :key = "colIndex" :span = "col.span"
            :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
              <template v-for = "citem in col.list" >
                <Show-form-item :key = "citem.key" :models.sync = "models" :rules = "rules" :widget = "citem"></Show-form-item>
              </template>
            </el-col>
          </el-row>
        </template>
        <!-- tab标签页时 -->
        <template v-else-if = "item.type == 'tabs' && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
          <el-tabs :key = "item.key" :type = "item.options.tabType" :stretch = "item.options.stretch">
            <el-tab-pane v-for = "(tabItem, tabIndex) in item.tabList" :key = "tabIndex" :label = "tabItem.label">
              <template v-for = "el in tabItem.list">
                <!-- 为栅格布局时 -->
                <template v-if = "el.type == 'grid' && (Object.keys(el.options).indexOf('isHidden') === -1 || !el.options.isHidden)">
                  <el-row :key = "el.key" type="flex"
                  :gutter = "el.options.gutter ? el.options.gutter : 0"
                  :justify = "el.options.justify"
                  :align = "el.options.align">
                    <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span"
                    :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
                      <template v-for = "citem in col.list" >
                        <Show-form-item :key = "citem.key" :models.sync = "models" :rules = "rules" :widget = "citem"></Show-form-item>
                      </template>
                    </el-col>
                  </el-row>
                </template>
                <!-- 其它组件 -->
                <template v-else>
                  <Show-form-item :key = "el.key" :models.sync = "models" :rules = "rules" :widget = "el"></Show-form-item>
                </template>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <Show-form-item :key = "item.key" :models.sync = "models" :rules = "rules" :widget = "item"></Show-form-item>
        </template>
      </template>
    </el-form>
  </div>
</template>

<script>
import ShowFormItem from './ShowMetaFormItem.vue'
// import {loadJs} from '../util/index.js'
export default {
  components: {
    ShowFormItem
  },
  props: ['data'],
  data () {
    return {
      models: {},
      rules: {}
    }
  },
  created () {
    this.generateModle(this.data.list)
  },
  methods: {
    generateModle (genList) {
      for (let i = 0; i < genList.length; i++) {
        if (genList[i].type === 'grid') {
          genList[i].columns.forEach(item => {
            this.generateModle(item.list)
          })
        } else if (genList[i].type === 'tabs') {
          for (let t = 0; t < genList[i].tabList.length; t++) {
            this.generateModle(genList[i].tabList[t].list)
          }
        } else {
          // 将每一个的model属性当做唯一的标识---赋予初始值
          this.models[genList[i].model] = genList[i].options.defaultValue
          // 获取表单验证的规则
          if (this.rules[genList[i].model]) {
            this.rules[genList[i].model] = [...this.rules[genList[i].model], ...genList[i].rules.map(item => {
              if (item.pattern) {
                return {...item, pattern: item.pattern}
              } else {
                return {...item}
              }
            })]
          } else {
            this.rules[genList[i].model] = [...genList[i].rules.map(item => {
              if (item.pattern) {
                return {...item, pattern: item.pattern}
              } else {
                return {...item}
              }
            })]
          }
        }
      }
    }
  },
  watch: {
    data: {
      deep: true,
      handler (val) {
        this.generateModle(val.list)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.show_content{
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media(max-width: 1367px) {
 .show_content{
    max-height: 400px;
  }
}
</style>
